<template>
  <div>
      <bg-canvas></bg-canvas>
      <div class="login_wrap">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
              <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item class="myveri" label="验证码" prop="veri">
              <el-input class="myinp" v-model="ruleForm.veri"></el-input>
              <div>
                <veri-com></veri-com>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)"
                >登录</el-button
              >
              <el-button @click="resetForm(ruleFormRef)">清空表单</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script lang="ts">
import bgCanvas from './bgCanvas.vue'
import veriCom from './veri.vue'
export default {
  components:{bgCanvas,veriCom}
}
</script>
<script lang="ts" setup>
import { reactive, ref, toRefs ,getCurrentInstance, ComponentInternalInstance} from 'vue'
import  { ElForm,ElMessage} from 'element-plus'
import {LoginApi,checkVeri} from '../../api/login'
import {useRouter} from 'vue-router'
// InstanceType   获取构造函数的实例类型
// 获取了ElForm的类型
let router=useRouter();
type FormInstance = InstanceType<typeof ElForm>
const formSize = ref('')
// 创建一个ElForm的类型的数据
const ruleFormRef = ref<FormInstance>()
//*******获取当前组件实例
const {appContext}:any= getCurrentInstance();
console.log(appContext.config.globalProperties)
// 用reactive 创建 v-model的数据
const ruleForm = reactive({
  username: '',
  password:'',
  veri:''
})
// 创建表格的验证条件
const rules = reactive({
  username: { required: true, message: '请输入用户名',trigger: 'blur'},
  password: [{required: true,message: '密码必填',trigger: 'blur'},{
      pattern:/\w{3,6}/,message:"密码格式错误",trigger:'blur'
  }],
  veri:  { required: true,message: '输入验证码', trigger: 'blur', }
})
// 表单验证
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  // 表单开始验证
  formEl.validate(async (valid) => {
    console.log(valid)
    if (valid) { //
        var veriRes:any=await checkVeri(ruleForm.veri)//校验验证码接口
          console.log(veriRes)
          if(veriRes.success){
            // 验证码成功调用登录接口
                var res:any=await LoginApi({
                     userName: ruleForm.username,
                     password: ruleForm.password
                })
                console.log(res)
               formEl.resetFields() //表单重置方法
              localStorage.tokenId=res.tokenId;
              // 跳转主页
              router.push({
                name:"Home"
              })
          }
          if(veriRes.err){//验证码
             appContext.config.globalProperties.$message("验证码错误")
          }
    } else {
      console.log('error submit!')
      return false
    }
  })
}
// 表单重置方法
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields() //表单重置
}

</script>
<style lang="less" scoped>
   .login_wrap{
     position: absolute;
     background: white;
     width: 800px;
     height:400px;
     left: 50%;
     top:50%;
     margin-left: -400px;
     margin-top: -200px;
   }
   .demo-ruleForm{
     height: 400px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
   }
   .myinp{
     width: 300px;
   }
</style>



